:root {
    --Unvisited: #000000;
--MsgTopHL: #8d98c9;
--QuoteBG: #e5e8ed;
--MenuBG: #4b73aa;
--TopbarBG: #24649a;
--MenuHover: #ffffff;
--MenuActive: #ff0080;
--ActiveThread: #dfe3ef;
--Visited: #000099;
--Footnote: #8a8a8a;
--MsgTop: #6896d5;
--BG: #cfcfcf;
--Text: #000000;
--QuoteTop: #a7bdde;
--QuoteBar: #a7bdde;
--UserbarBG: #2e5a7f;
--DimLink: #8279ae;
--ErrorText: #ff0000;
--MenuText: #dde3eb;
--DangerLink: #9c1f1f;
--InputBG: #ffffff;
--QuoteBorder: #cfcfcf;
--MsgBG: #dde3eb;
--InputText: #000000;
--NextpageBG: #fcffb3;
--NextpageBorder: #d1d394;

    --EmojiHover: var(--Footnote);
}

@font-face {
    font-family: UnifrakturMaguntia;
    src: url(https://lore.capital/static/UnifrakturMaguntia.ttf);
    font-display: swap;
}



/* stolen from LlamaGuy */
body, table.classic tr td {
    background: var(--BG);
    color: var(--Text);
    font-family: "Arial", sans-serif;
    font-size: var(--FontSize, var(--FontSizeDefault, small));
}

textarea {
    font-family: "Arial", sans-serif;
    font-size: var(--FontSize, var(--FontSizeDefault, small));
}

textarea.locked {
    background: var(--BG);
}

body.regular, body.classic {
    margin: 0;
}

body.regular .body {
    padding: 9px
}

img {
    border: 0
}

a {
    color: var(--Unvisited, var(--Text));
}

a:visited {
    color: var(--Visited);
}


a.count-link {
    text-decoration: none;
}
a.count-link:not(.active-link) .count-body {
    text-decoration: underline;
}
a.count-link .count-n {
    text-decoration: none;
}

.footnote {
    color: var(--Footnote);
}

.footnote :is(a, a:visited) {
    color: var(--Footnote);
    font-weight: bold;
}

.error {
    color: var(--ErrorText);
}

a span.m {
    position: relative;
    top: -3px !important;
    top: 0;
    height: 10px;
    font-size: 6pt;
    margin: 0 1px;
    padding-left: 10px;
    border-bottom: 2px dotted var(--Unvisited, var(--Text));
    color: var(--Unvisited, var(--Text));
}

a:visited span.m {
    border-bottom: 2px dotted var(--Visited);
}

a span.m span {
    font-size: 0
}

ins {
    /* background-color: #dfd; */
    border: 1px dashed green;
    background-color: rgb(114 208 91 / 26%);
}

ins.pair {
    border-left: 0 solid red
}

ins img {
    border: 3px solid green
}

del, ins {
    padding: 0 2px;
    font-weight: bold;
    text-decoration: none;
}

del {
    /*color: var(--DangerLink, red);*/
    border: 1px dashed var(--DangerLink, red);
    background-color: rgb(208 91 91 / 26%);
}

del.pair {
    border-right: 0 solid red
}

del img {
    border: 3px solid red
}

#register label {
    font-weight: bold
}

/*em {
    color: #f00;
    font-style: normal
}*/

/*
:is(.message, article.wiki) strong::before, :is(.message, article.wiki) strong::after {
    content: "*";
    opacity: 0.5;
    font-family: monospace;
    font-size: larger;
}
*/

/* thanks MDN */
kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
    color: #333;
    display: inline-block;
    /*font-size: 0.85em;*/
    min-width: 1em;
    text-align: center;;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
    font-family: system-ui;
}

:is(.message, article.wiki) :is(h1, h2, h3, h4, h5, h6)[id]:hover {
    cursor: pointer;
}

:is(.message, article.wiki) :is(h1, h2, h3, h4, h5, h6)[id]:hover::after {
    content: " #";
    font-size: smaller;
    font-style: normal;
    font-weight: normal;
}

input[type="text"], input[type="password"], input[type="email"], input[type="search"], select, textarea {
    background: var(--InputBG);
    color: var(--InputText);
}

input [type="text"] {
    border: 1px solid;
    padding: 4px 1px
}

input[type="text"]:user-invalid {
    border: 1px dashed var(--ErrorText, red);
}
input[type="text"]:not(:user-invalid) {
    border: 1px solid var(--Text, black);
}

h1, h2, h3 {
	text-wrap: balance;
    font-weight: bold;
    margin: 3px 0;
    text-align: center
}

h1 {
    font-size: x-large;
    font-style: italic;
    margin-top: 12px
}

h2 {
    font-size: large;
}

h3 {
    font-size: medium;
    text-align: left;
    margin: 0
}

hr {
    height: 1px;
    border: 0;
    background: var(--Text);
}

small {
    font-size: x-small;
}

div.menubar, div.userbar, div.topbar, div.infobar, .message, div.message-top {
    margin: 2px 0
}

div.menubar, div.userbar, div.topbar, div.infobar {
    font-weight: bold;
    /* font-size: var(--FontSize, larger); */
    font-size: larger;
    color: var(--MenuText);
    padding: 1px 3px;
    text-align: center
}

div.menubar {
    margin-top: 0;
    background: var(--MenuBG);
}

div.userbar {
    background: var(--UserbarBG);
}

div.topbar {
    background: var(--TopbarBG);
}

div.infobar {
    background: var(--MenuBG);
}

.message, div.message-top {
    padding: 0 3px;
    font-size: var(--FontSize, var(--FontSizeDefault, small));
}

.user-icon {
    color: var(--MenuText);
}

.message a, article a {
    color: var(--Unvisited, var(--MsgLink, var(--Text)));
}

.message a:visited, article a:visited {
    color: var(--MsgVisited, var(--Visited));
}

article .content a:not([href^='/wiki/article/']):not([href='#'], [href='/#']) {
    text-decoration-style: dotted;
}

article.wiki a[href^='/wiki/article/'], a[href^='/wiki/article/'] {
    color: var(--Unvisited);
    text-decoration-color: var(--Visited);
}
/*
a[href^='/wiki/article/']:hover {
    text-decoration-style: solid;
}
*/

.article-edit-nav {
    margin-bottom: 1px;
}

article.wiki .article-edit-nav a {
    color: var(--Text);
    text-decoration: none;
    font-weight: normal;
}

article.wiki .article-edit-nav a:hover .text {
    color: var(--Visited);
    text-decoration: underline;
    text-decoration-color: var(--Visited);
}

article.wiki .article-edit-nav a:hover .arrow {
    color: var(--Unvisited);
}

.message pre, article pre {
    /*font-size: medium;*/
    white-space: pre;
    overflow: auto;
    word-break: keep-all;
    overflow-wrap: normal;
    max-width: 70vw;
    padding: 1ch;
}

pre, textarea {
    tab-size: 4;
}

/*@property --avatar-width: {
	syntax: "<length>";

}*/

:root {
	--avatar-width: 150px;
	--avatar-height: 150px;
}

body.autoscroll {
	--avatar-width: 75px;
	--avatar-height: 75px;
}

.message p {
    overflow-wrap: break-word;
    word-break: break-word;
}

.message p:not(.msg-quote > p:first-child)  {
    max-width: 80vw;
}

.message.noavs p {
    max-width: 100%;
}

:is(.message-top, .userpic) .pronouns {
    font-size: smaller;
}

.reply-nest {
    border-left: 3px dashed var(--MsgTop);
    padding-left: 5px
}

table.message-body tr td.message, div.message, table.message-body tr td.userpic {
    background: var(--MsgBG);
    overflow: visible
}

div.message-top {
    background: var(--MsgTop);
}

.message-container:target div.message-top {
    background: var(--MsgTopHL, var(--ActiveThread));
}

.user-title {
    word-break: break-word;
    font-size: initial;
}

.msg-trailer, .msg-trailer a, .msg-trailer a:visited {
    font-family: cursive;
    transition: 0.5s ease;
}

.msg-trailer:not(.revealed), .msg-trailer:not(.revealed) :is(a, a:visited) {
    cursor: zoom-in;
    color: var(--MsgBG) !important;
}

.msg-trailer:not(.revealed) * {
    pointer-events: none;
}

:is(.msg-trailer, .msg-trailer *, .msg-trailer :is(a, a:visited))::selection,
.msg-trailer.revealed {
    color: var(--Text);
}

.spoiler_closed {
    margin-block-start: 1em;
}

.spoiler_closed .caption {
    white-space: nowrap;
}

.spoiler_closed .spoiler_on_open {
    display: none;
}

.spoiler_opened .spoiler_on_close {
    display: none;
}

details.attachment {
    margin-top: 0.5em;
    border: 1px solid var(--Text);
}

details.attachment summary {
    cursor: pointer;
    padding: 0.3em;
    line-height: 1em;
    background: var(--MenuBG);
    color: var(--MenuText);
}

details summary {
    cursor: pointer;
}

details summary:hover {
    text-decoration: underline;
}

details.attachment[open] summary {
    border-bottom: 2px solid var(--BG);
}

details.attachment .inner {
    padding: 0.5em 0.5em 0;
}

span.attachment a {
    text-decoration: none;
}

span.attachment a .filename {
    text-decoration: underline;
}

div.menubar a, div.userbar a, div.infobar a, div.topbar a, table.classic tr th a, table.grid tr th a {
    color: var(--MenuText);
}

div.menubar a:visited, div.userbar a:visited, div.topbar a:visited, div.infobar a:visited,
table.classic tr th a:visited, table.grid tr th a:visited {
    color: var(--MenuText);
}

div.menubar a:hover, div.userbar a:hover, div.topbar a:hover, div.infobar a:hover, table.classic tr th a:hover,
table.grid tr th a:hover {
    color: var(--MenuHover);
}

div.menubar a:active, div.userbar a:active, div.topbar a:active, div.infobar a:active,
table.classic tr th a:active, table.grid tr th a:active {
    color: var(--MenuActive);
}

table.grid {
    width: 100%;
    border-collapse: collapse;
    border: hidden;
    margin: 0
}

table.grid tr td, table.grid tr th {
    border: 2px solid var(--BG);
    border-width: 0 2px 2px 0
}

table.grid tr td {
    background: var(--MsgBG);
    font-size: var(--FontSize, var(--FontSizeDefault, small));
    padding: 0 3px 1px 3px;
    /* transition: background 1s; */
}

table.grid tr.active-thread td {
    background: var(--ActiveThread);
}

table.grid tr th {
    background: var(--MenuBG);
    font-size: var(--FontSize, medium);
    text-align: center;
    color: var(--MenuText);
}

table.grid tr td.sticky {
    font-weight: bold
}

table.grid tr td.closed, span.closed {
    background-image: url('//lore.capital/static/closed.gif') !important;
    background-position: 3px center;
    background-repeat: no-repeat;
    padding-left: 18px;
}

table.grid:not([data-mode=hiding]) tr td .post-counts,
table.grid[data-mode=hiding] tr td .thread-hide {
    display: revert;
}
table.grid[data-mode=hiding] tr td .post-counts,
table.grid:not([data-mode=hiding]) tr td .thread-hide {
    display: none;
}
.thread-hide button {
    width: 8ch;
    padding: 0;
}
.thread-hide button.hidden .when-hidden,
.thread-hide button:not(.hidden) .when-unhidden {
    display: revert;
}
.thread-hide button:not(.hidden) .when-hidden,
.thread-hide button.hidden .when-unhidden {
    display: none;
}

.pr {
    font-family: monospace;
    white-space: pre
}

.pr br {
    display: none
}

blockquote {
    margin: 0;
    padding-left: 6px;
    border-left: 2px solid var(--MsgTop);
    /* border-left: 2px solid var(--QuoteTop, var(--MsgTop)); */
}

blockquote.msg-quote {
    background: var(--QuoteBG, var(--MsgBG));
    border-left: 2px solid var(--QuoteBar, var(--QuoteTop, var(--MsgTop)));
    border-right: 1px solid var(--QuoteBorder, var(--BG));
    border-bottom: 1px solid var(--QuoteBorder, var(--BG));
}

blockquote.msg-quote blockquote.msg-quote {
    opacity: 0.9125;
}

/*
blockquote.msg-quote blockquote.msg-quote:hover {
    opacity: 1;
}
*/

blockquote.msg-quote blockquote {
    margin: 1ch;
}

blockquote.msg-quote .spoiler_on_open > blockquote {
    margin: 0;
    border-left: none;
}

blockquote.msg-quote > p:first-child {
    background: var(--QuoteTop, var(--MsgTop));
    margin-left: -6px;
    padding-left: 2px;
}

/* this is the limit, lol */
blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > blockquote {
    visibility: hidden;
}

@supports (background-color: color-mix(in srgb, #34c9eb 75%, white)) {
    .message blockquote.msg-quote > p:first-child {
        background: var(--QuoteTop, color-mix(in srgb, var(--MsgTop), transparent));
    }
}

@supports not (background-color: color-mix(in srgb, #34c9eb 75%, white)) {
    .message blockquote.msg-quote > p:first-child {
        opacity: 0.9125;
    }
}

blockquote > p {
    margin: 0;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

blockquote.gold {
    /*border-color: var(--GoldBorder, #D4AF37);*/
    animation: goldanim 1s infinite;
    animation-timing-function: ease-in;
    animation-direction: alternate;
}

span.goldtext {
    animation: gold-glow 3s infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

span.cake {
	animation: gold-glow-small 3s infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

span.valentine {
	animation: pink-glow 3s infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	font-size: 1.3em;
	font-style: normal;
}

@keyframes goldanim {
    0% {
        border-color: var(--GoldBorder1, #DA9100);
    }
    50% {
        border-color: var(--GoldBorder2, #D4AF37);
    }
    100% {
        border-color: var(--GoldBorder3, #FFDF00);
    }
}

@keyframes gold-glow {
    0% {
      text-shadow: 0 0 8px #FFD700;
    }
    50% {
      text-shadow: 0 0 20px #FFD700, 0 0 30px #FFA500, 0 0 40px #FFA500;
    }
    100% {
      text-shadow: 0 0 8px #FFD700;
    }
  }

@keyframes gold-glow-small {
    0% {
    	text-shadow: 0 0 4px #FFD700;
    }
    50% {
    	text-shadow: 0 0 6px #FFD700, 0 0 8px #FFA500, 0 0 10px #FFA500;
    }
    100% {
    	text-shadow: 0 0 4px #FFD700;
    }
}

@keyframes pink-glow {
  0% {
    text-shadow: 0 0 1px #FF69B4;
  }
  50% {
    text-shadow:
      0 0 2.5px #FF69B4,
      0 0 2.5px #FFC0CB,
      0 0 2.5px #FFC0CB;
  }
  100% {
    text-shadow: 0 0 1px #FF69B4;
  }
}

.message blockquote img, .message blockquote video, .message img.shrunk {
    max-width: min(360px, 100%);
    max-height: min(360px, 100%);
    height: auto;
    object-fit: scale-down;
    object-position: left center;
}

.message img.shrunk {
    cursor: pointer;
}

.message blockquote img.expanded {
    max-width: 100%;
    max-height: unset;
    height: auto;
    cursor: pointer;
}

.message .message-top {
    background-color: transparent;
    padding-left: 0
}

#reply-area {
    border-top: 2px solid var(--BG);
}

#reply-area, #pages, #socket-status, #socket-status ~ .userbar {
    z-index: 10;
    isolation: isolate;
}

#reply-area:is(.sticky, .fixed) {
    touch-action: none;
}

#reply-area:is(.sticky, .fixed) textarea {
    touch-action: pan-y;
    overscroll-behavior: none;
}

#nextpage {
    z-index: 2;
    position: relative;
}

#reply-close, #reply-delete, #reply-autoscroll {
    background: var(--MenuBG);
    color: var(--MenuText);
    border-left: 1px solid var(--BG);
    align-self: stretch;
    padding: 0 1ch;
    cursor: pointer;
}

body:not(.autoscroll) #reply-autoscroll {
	display: none;
}

.hoverbutton:hover {
    translate: -1px -1px;
}

:is(#reply-close, #reply-delete, #reply-autoscroll) > div {
    align-self: center;
}

.reply-top {
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--BG);
}

.reply-menu {
    flex: 1;
    padding-left: 2px;
    background: var(--MsgTop);
}

#reply-area preview {
    background: var(--MsgBG);
}

.reply-form-box {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1em;
    column-gap: 1em;
}

.reply-form-box form {
    flex: 1;
    margin: 0;
}

.reply-form-box textarea {
    width: 100%;
    height: 20ch;
}

#reply-area .reply-help {
    margin-right: 1em;
}

#reply-area :is(button, input[type=submit], input[type=file]) {
    appearance: button;
}

#reply-floater {
    position: fixed;
    right: 1em;
    bottom: 5vh;
    height: 3em;
    width: 3em;
    /* z-index: 5; */
}

@media (hover: hover) {
    #reply-floater {
        display: none;
    }
}

#reply-floater button {
    width: 100%;
    height: 100%;
    text-align: center;
}

.preview {
    overflow: auto;
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    bottom: env(safe-area-inset-bottom);
}

.fixed {
    position: fixed;
    width: calc(100% - 4px);
}

form.inline {
    margin: 0;
    display: inline-block;
}

table.message-body {
    border-collapse: collapse;
    margin: 0;
    width: 100%;
}

.message:not(.preview) {
    padding: 5px;
    position: relative;
}

.message .message-contents > *:first-child {
    margin-top: 0;
}

.message .message-contents > *:last-child {
    margin-bottom: 1.25em;
}

/* fix empty <p>s at end of messages */
.message .message-contents > *:last-child:empty:not(:first-child) {
    margin-bottom: 0;
}
.message .message-contents > *:last-child:empty:not(:first-child):after {
  content: "";
  display: inline-block;
  width: 0px;
}

/* blankposts */
.message .message-contents:empty:not(.preview) {
    height: 1em;
}

.message .emoji-bar {
    position: absolute;
    right: 0;
    bottom: 0;
    min-height: 1em;
    text-align: right;
}

.message .emoji-bar a {
    text-decoration: none;
    white-space: nowrap;
}

.message .emoji-bar a:hover {
    text-decoration: none;
    box-shadow: 2px 2px var(--EmojiHover, gray);
    background: #c8ced5;
}

.emoji-bar select:disabled {
    opacity: 0.2;
    cursor: wait;
}

a .emoji-text {
    font-size: 1.25em;
    color: var(--Text);
}

.emoji-box {
    box-sizing: content-box;
    -webkit-touch-callout: none;
}
.emoji-box.me {
    background-color: rgba(150, 150, 150, 0.3);
    border: 2px solid var(--EmojiHover, gray);
}

.message .replies-bar {
    color: var(--Footnote);
    position: absolute;
    left: 0;
    bottom: 0;
    min-height: 1em;
    text-align: left;
}

.message .replies-bar .icon {
    color: var(--Footnote);
    font-size: larger;
}

.message .replies-bar a {
    color: var(--Footnote);
    text-decoration: none;
    white-space: nowrap;
}

.message .replies-bar a:visited {
    color: var(--Footnote);
}

.message h1, .message h2, .message h3,
article h1, article h2, article h3 {
    font-weight: bold;
    margin: 1em 0;
    text-align: left;
}

.message h1 {
    font-size: large;
    font-style: normal;
    margin-top: 12px
}

article h1 {
    font-style: normal;
    word-wrap: break-word;
    margin-top: 1em;
}

article h2, article h3 {
    margin-top: 0.6em;
}

article h4, article h5 {
    margin-top: 0.3em;
}

.message h2 {
    font-size: medium;
}

.message h3 {
    font-size: larger;
    margin: 0
}

.message table, article table {
    font-size: small;
    margin-bottom: 1em;
    border-collapse: collapse;
    border: 1px solid var(--BG);
}

.message table th, .message table td, article table th, article table td {
    padding: 0.2em;
    border: 1px solid var(--BG);
}

.indexmotd.message table {
    font-size: small;
    border: none;
    table-layout: fixed;
    font-size: small;
    margin-bottom: 0;
}

.indexmotd.message table th, .indexmotd.message table td {
    border: none;
}

table.alignment, table.alignment tr td {
    border: none;
    margin-bottom: 0;
}

.message .ascii, article .ascii {
  white-space: pre;
  overflow: auto;
  word-break: keep-all;
  overflow-wrap: normal;
}

/*.ascii::-webkit-scrollbar, .aa::-webkit-scrollbar {
    display: none;
}*/

/*.ascii, .aa {
    scrollbar-width: none;
}*/

/*.message table * {
    font-size: smaller;
}*/

.message ul, .message ol, article ul, article ol {
    padding-left: 2em;
}


table.message-body td.message {
    vertical-align: top;
    width: 100%
}

/* xmas */
/*
div.message-container:nth-child(even) table.message-body tr td.userpic {
    background: #cedacd20;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, #2e6f2d50 10px, #2e6f2d50 20px) !important;
}
div.message-container:nth-child(odd) table.message-body tr td.userpic {
    background: #e4d7db20;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, #cf042250 10px, #cf042250 20px) !important;
}
.userpic center {
    font-weight: bold;
}
*/
/* end xmas */

table.message-body td.userpic {
    border-left: 2px solid var(--BG);
    padding: 2px;
    vertical-align: top
}

table.message-body td.userpic div.userpic-holder {
    min-width: var(--avatar-width, 150px);
    max-width: var(--avatar-width, 150px);
    overflow: hidden;
    text-align: center
}

.userpic-holder img {
    max-width: var(--avatar-width, 150px);
    max-height: var(--avatar-height, 150px);
    object-fit: scale-down;
}

.userpic-unsized {
    width: var(--avatar-width, 150px);
    height: var(--avatar-height, 150px);
}

a.autoscroll-button:is(:visited, *) {
	text-decoration: none;
	color: var(--MenuText);
	cursor: pointer;
	font-weight: normal;
}

.page-jump-button:is(:visited, *) {
	margin-bottom: -2px;
	text-decoration: none;
	color: var(--MenuText);
}
body.firefox .page-jump-button:is(:visited, *) {
	font-size: larger;
}

body:not(.autoscroll) .autoscroll-button {
	opacity: 0.5;
}

body:not(.autoscroll) .message-top .autoscroll-pronouns {
	display: none;
}
body.autoscroll .message-top .autoscroll-pronouns {
	display: unset;
}
body.autoscroll .pronouns:not(.autoscroll-pronouns *) {
	display: none;
}
body.autoscroll .message-contents :is(img:not(.shrunk):not(.twemoji), video) {
	max-height: 60vh;
	width: auto;
}

body.autoscroll .userpic .user-title {
	display: none;
}

:root:has(body.autoscroll) {
	/*
	scroll-behavior: smooth;
	*/
}

.left-right:is(div, *):is(*) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
}

.left-right > * {
	display: block;
	margin: 0;
}

body.firefox .left-right > * {
	margin-bottom: 2px;
}
body:not(.firefox) .left-right > * {
	margin-bottom: -1px;
}

.oh {
    overflow: hidden
}

.fl {
    float: left
}

.fr {
    float: right
}

a.danger {
    color: var(--DangerLink, var(--Unvisited));
}

#nextpage {
    background: var(--NextpageBG);
    border-bottom: 1px solid var(--NextpageBorder);
    border-top: 1px solid var(--NextpageBorder);
    color: var(--Text); /*#2f3841*/
    font-size: var(--FontSize, medium);
    padding: 10px 21px;
    text-align: center;
    text-decoration: none;
}

a.jump-arrow {
    text-decoration: none
}

a.tag-suggestion {
    text-decoration: underline;
}

a.active-zone, a.active-link {
    text-decoration: none;
}

.icon-link {
    /* font-size: larger; */
    text-decoration: none;
}

.gear {
    display: inline-block;
    overflow: visible;
    font-size: x-large;
    position: absolute;
    right: 0.5ch;
    top: -1px;
}

.message img, .message video, article img, article video {
    max-width: 100%;
    height: auto;
}
.message video, article video {
    max-height: calc(100vh - 4em);
    object-fit: contain;
    object-position: left top;
}

/*.embed-container iframe {
    width: 640;
    height: 360;
}*/

.embed-box {
    width: min(800px, 100%);
}
.embed-container {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.embed-link img {
    box-shadow: 5px 5px var(--BG);
    margin-bottom: 5px;
}

.embed-link:hover img {
    box-shadow: 5px 5px var(--QuoteTop, var(--BG));
}

.embed-link:active img {
    translate: 5px 5px;
    box-shadow: none;
}

/* embeds add extra empty ps */
.message p:empty:not(:last-child), article p:empty:not(:last-child) {
    display: none;
}

code, .message code, article pre[style*="color"] {
    font-size: var(--FontSize, medium);
    white-space: pre-wrap;
}

.centerbox {
    width: 75%;
    margin: 0 auto;
}

.posted-link {
    text-decoration: none;
}
.posted-link:visited {
    color: var(--Text);
}
.posted-link:hover {
    text-decoration: underline;
}

.joinbox {
    background: var(--MsgBG);
    padding: 10px;
}

.quick-join {
    color: var(--MenuText);
}

.antizalgo {
    overflow-y: hidden;
}

.avatar-editable {
    cursor: cell;
    border: 2px dashed transparent;
}
.avatar-editable:hover {
    border-color: rgba(150, 150, 150, 0.8);
}

.flash-msg {
    background: var(--ActiveThread, var(--BG));
}
.flash-msg > p {
    text-align: center;
}

fieldset {
    background: var(--MsgBG);
    max-width: 90vw;
}

legend {
    font-weight: bold;
}

article.wiki {
    background: var(--MsgBG);
    padding: 1em;
    padding-left: 6.5vw;
    padding-right: 6.5vw;
}

article.wiki :is(h1, h2), article.wiki hr {
    clear: both;
}

.article-ops {
    width: 100%;
    text-align: right;
    margin-bottom: 0.2em;
}

:is(.article-ops, .edit-info) :is(a, a:visited) {
    color: var(--Unvisited);
}

.edit-info {
    text-align: right;
}

:is(p, div, figure, figcaption, img)[align=left]:not([align] *) {
    float: left;
    text-align: left;
    max-width: 50%;
    margin: 1em;
    margin-left: 0;
}

:is(p, div, figure, figcaption, img)[align=right]:not([align] *) {
    float: right;
    text-align: right;
    max-width: 50%;
    margin: 1em;
    margin-right: 0;
}

figure figcaption {
    text-align: center;
    font-style: italic;
}

.flavor-emote, .fraktur, :is([data-flags~=fraktur], [data-vibe=fraktur]) /* .message-contents */ {
    font-family: 'UnifrakturMaguntia';
    font-feature-settings: "ss01", "ss11", "cv12", "rlig";
}

.fraktur.ez {
    font-feature-settings: "ss01", "cv12", "rlig";
}

[data-vibe=fraktur] .userpic-holder > img {
    filter: sepia(75%) grayscale(50%);
}

[data-vibe=fraktur] .message-contents {
    font-size: larger;
}

/*
img[align=left], img[align=right], :is([align=left], [align=right]) > img {
    max-width: 50%;
}
*/

@media (min-width: 1200px) {
	:root {
		/* --FontSizeDefault: normal; */
	}
}

@media screen and (min-width: 768px) {
    .mobile-only { display: none; }
    .desktop-only { display: unset; }

    .username-column {
        max-width: 20ch;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #emoji-dialog {
        left: calc(100% - 680px);
    }
}

/*
body:has(#reply-content:focus) {
    touch-action: none;
}
#reply-content {
    touch-action: pan-y !important;
}
*/

#reply-content {
	height: 20ch;
}
body.autoscroll #reply-content {
	height: 8ch;
}

@media screen and (max-width: 767px) {
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: none;
    }
    .desktop-only {
        display: none;
    }

    body.regular, body.classic {
    	margin-bottom: 25px;
    }

    body.regular .body {
        padding: 3px
    }

    :root {
    	--avatar-width: 80px;
    	--avatar-height: 80px;
    }

    body.autoscroll {
		--avatar-width: 60px;
		--avatar-height: 60px;
    }

    .userpic-holder center {
        font-size: smaller !important;
    }
    .message :is(p:not(.msg-quote > p:first-child), ul, ol) {
    	max-width: max(calc(100vw - var(--avatar-width, 80px) - 6px), 70vw);
    }
    .message ul, .message ol, article ul, article ol {
        padding-left: 1.5em;
    }
    .message.noavs p, .message.noavs p:not(.msg-quote > p:first-child) {
        max-width: 100%;
    }
    .reply-box {
        float: none !important;
        width: 100% !important;
    }
    .reply-help {
        margin-left: revert !important;
    }
    #reply-content, textarea {
        height: 100px;
        width: 100%;
        box-sizing: border-box;
    }
    .hide-small {
        display: none !important;
    }
    .message blockquote.msg-quote blockquote, article blockquote.msg-quote blockquote {
        margin: 2px;
    }
    .message blockquote img.shrunk, .message blockquote video,
    article blockquote img.shrunk, article blockquote video {
        max-width: min(75%, 360px);
        max-height: min(30vh, 360px);
        height: auto;
    }
    .embed-container {
        position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
    }
    .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .centerbox {
        width: 95% !important;
    }

    input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select, select:focus {
        font-size: 16px !important;
        max-width: 100%;
    }
    details.attachment button {
        font-size: 16px;
    }

    img, video {
        max-width: 100%;
        height: auto;
    }
    video {
        max-height: calc(100vh - 2em);
        object-fit: contain;
    }


    .message img.expanded, article img.expanded {
        max-width: calc(100vw - 5%);
        height: auto;
    }

    table.grid {
        table-layout: fixed !important;
        word-break: break-word !important;
    }
    table.grid th.main-column {
        width: 50% !important;
    }
    table.grid th.main-column-lesser {
        width: 40% !important;
    }
    .post .user-title {
        font-size: small;
    }

    #thread-list tr td .fr :is(a:not(.danger), a:not(.danger):visited) {
        color: var(--DimLink, var(--Footnote));
    }

    .message .emoji-bar.emoji-spam {
        position: relative;
    }

    .reply-form-inner {
        min-width: 90vw;
    }
}

/* emoji picker */
/*
html:has(dialog[open]) {
    overflow: hidden;
}
*/
dialog {
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-size: 4px;
    box-shadow: var(--shadow-size) var(--shadow-size) 0 1px var(--shadow-color);
}

dialog::backdrop {
    /*backdrop-filter: blur(2px);*/
}

#emoji-dialog {
    background: var(--MsgBG);
    border: 1px solid var(--DialogBorder, black);
}

.emoji-picker {
    max-height: 50vh;
    overflow-y: scroll;
    display: grid;
    grid-template-columns: repeat(4, 4rem);
    /*grid-auto-rows: 1.4rem;*/
    gap: 4px;
    padding-right: 0.5em;
    padding-bottom: 0.1em;
    overscroll-behavior: contain;
}

.emoji-picker > * {
    overflow: hidden;
    font-size: larger;
    text-wrap: nowrap;
    word-break: keep-all;
    color: var(--Text);
    background: var(--MsgBG);
    border: solid var(--Footnote) 1px;
    cursor: pointer;
    /*border: solid color-mix(in lch, var(--Footnote), var(--MsgBG) 10%) 1px;*/
}
.emoji-picker > button:is(.me, :hover) {
    background: color-mix(in lch, var(--MsgBG), var(--Text) 10%);
}
.emoji-picker > .wide {
    grid-column: span 2;
    width: 100%;
    text-overflow: ellipsis;
}

@media screen and (max-width: 767px) {
    .emoji-picker > * {
        padding: 2px;
    }
}

.emoji-dialog {
    padding: 0;
    padding-left: 0.5em;
    /*padding-top: 0.25em;*/
    padding-bottom: 0.25em;
}

.emoji-dialog-top {
    margin-top: 6px;
    margin-bottom: 4px;
    padding-right: 0.25em;
}

.emoji-dialog-top:has(.error-msg:not(:empty)) .emoji-search {
    display: none;
}

.emoji-dialog-top .error-msg:empty {
    display: none;
}

.emoji-dialog-top .error-msg {
    font-weight: bold;
    align-self: center;
}

.emoji-dialog-top form {
    width: 100%;
    display: grid;
    justify-content: end;
    grid-template-columns: 4fr auto auto;
    gap: 4px;
}

/* twemoji */
img.twemoji {
   height: 1.15em;
   width: 1.15em;
   /*margin: -0.1em .05em -0.25em .05em;*/
   margin: 0 .05em -0.1em .05em;
   vertical-align: -0.1em;
   filter: brightness(90%) saturate(150%); /* the goggles, they do nothing */
}
:is(.emoji-picker, .post) img.twemoji {
	margin: unset;
}

img.pixelated {
	image-rendering: pixelated;
}

.modesty-sheet {
	margin: 0;
	padding: 0;
	border: none;
	background: var(--BG);
	width: 100%;
	height: 100%;
	z-index: 2;
	position: relative;
	margin-top: -1px;
	border-top: 1px solid var(--BG);
	box-sizing: border-box;
}